interface Snow {
    x: number;
    y: number;
    r: number;
}

const snows: Snow[] = []; //雪花对象数组
const count = 200; //雪花的个数
let w = window.innerWidth;
let h = window.innerHeight;

class Sonw {
    w: number;
    h: number;
    context: CanvasRenderingContext2D;

    constructor(w: number, h: number, context: CanvasRenderingContext2D) {
        this.w = w;
        this.h = h;
        this.context = context;
    }

    draw() {
        this.context.clearRect(0, 0, this.w, this.h);
        this.context.beginPath();
        for (let i = 0; i < count; i++) {
            const snow = snows[i];
            this.context.fillStyle = "rgb(255,255,255)"; //设置雪花的样式
            this.context.shadowBlur = 10;
            this.context.shadowColor = "rgb(255,255,255)";
            //moveTo 移动到指定的坐标
            this.context.moveTo(snow.x, snow.y);
            // 使用canvas arc()创建一个圆形
            //x，y，r：圆的中心的x坐标和y坐标，r为半径
            //0,Math.PI * 2起始弧度和结束弧度
            this.context.arc(snow.x, snow.y, snow.r, 0, Math.PI * 2);
        }
        //画布填充
        this.context.fill();
        this.move();
    }

    move() {
        for (let i = 0; i < count; i++) {
            const snow = snows[i];
            snow.y += (7 - snow.r) / 10; //从上往下飘落
            snow.x += ((5 - snow.r) / 10);//从左到右飘落
            if (snow.y > this.h) {
                snows[i] = {
                    x: Math.random() * this.w,
                    y: Math.random() * this.h,
                    r: Math.random() * 5,
                };
            }
        }
    }
}
let snowStatic: boolean
let dinshi: string | number | NodeJS.Timer | undefined
export function into() {
    snowStatic = true
    let canvas = document.createElement('canvas');
    canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
    canvas.setAttribute('id', 'canvas_snow');
    document.getElementsByTagName('body')[0].appendChild(canvas);
    const context = canvas.getContext('2d')!;  //2d 即指二维平面
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;  //全局分布
    canvas.height = h;

    for (let i = 0; i < count; i++) {
        snows.push({
            x: Math.random() * w,    //Math.random()用于生成0～1的随机数
            y: Math.random() * h,
            r: Math.random() * 5,
        });
    }
    // 创建一个雪花实例对象
    let sonwItem = new Sonw(w, h, context)

    // 待改进
    sonwItem.draw()
    //每毫秒刷新一次
    dinshi = setInterval(() => sonwItem.draw(), 10);
}


export function snowDestoty() {
    if (snowStatic) {
        let child = document.getElementById("canvas_snow") as HTMLCanvasElement;
        console.log(child);
        child.parentNode!.removeChild(child);
        clearInterval(dinshi)
    } else {
        console.log('暂无实例');
    }
}


// 宽度自适应
window.onresize = () => {
    let canvasSnow = document.getElementById('canvas_snow') as HTMLCanvasElement;
    canvasSnow.width = window.innerWidth;
    canvasSnow.height = window.innerHeight;
}
